<!-- 装修用户组件：用户订单 -->
<template>
  <view :style="[style, { marginLeft: `${data.space}px` }]" class="order-content">
    <!-- 第一行菜单 -->
    <view class="ss-order-menu-wrap ss-flex ss-col-center">
      <view
        class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
        v-for="item in orderMap"
        :key="item.title"
        @tap="sheep.$router.go(item.path, { type: item.value })"
      >
        <image class="item-icon" :src="'/static/' + item.icon" mode="aspectFit" />
        <view class="menu-title ss-m-t-28">{{ item.title }}</view>
      </view>
    </view>

    <!-- 我的订单部分 -->
    <view class="my-order-section">
      <view class="order-title">我的订单</view>
      <view class="ss-flex ss-col-center order-menu-wrap">
        <view
          class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
          v-for="item in myOrderMap"
          :key="item.title"
          @tap="sheep.$router.go(item.path, { type: item.value })"
        >
          <image class="item-icon" :src="'/static/' + item.icon" mode="aspectFit" />
          <view class="menu-title ss-m-t-28">{{ item.title }}</view>
        </view>
      </view>
      <view class="black-rectangle">
        <span>非野集</span>
      </view>
    </view>
  </view>
</template>

<script setup>
/**
 * 装修组件 - 订单菜单组
 */
import sheep from "@/sheep";
import { computed } from "vue";

const orderMap = [
  {
    title: "全部订单",
    value: "0",
    icon: "order.png",
    path: "/pages/order/list",
  },
  {
    title: "积分兑换",
    value: "0",
    icon: "jifen.png",
    path: "/pages/activity/point/index",
  },
  {
    title: "完善信息",
    value: "0",
    icon: "info.png",
    path: "/pages/user/info",
  },
  {
    title: "联系客服",
    value: "0",
    icon: "kefu.png",
    path: "/pages/chat/index",
  },
];

const myOrderMap = [
  {
    title: "待付款",
    value: "1",
    icon: "daifukuan.png",
    path: "/pages/order/list",
    type: "unpaid",
  },
  {
    title: "待收货",
    value: "3",
    icon: "daishouhuo.png",
    path: "/pages/order/list",
    type: "noget",
  },
  {
    title: "待评价",
    value: "4",
    icon: "daipingjia.png",
    path: "/pages/order/list",
    type: "nocomment",
  },
];
// 接收参数
const props = defineProps({
  // 装修数据
  data: {
    type: Object,
    default: () => ({}),
  },
  // 装修样式
  styles: {
    type: Object,
    default: () => ({}),
  },
});
// 设置角标
const numData = computed(() => sheep.$store("user").numData);
// 设置背景样式
const style = computed(() => {
  // 直接从 props.styles 解构
  const { bgType, bgImg, bgColor } = props.styles;
  // 根据 bgType 返回相应的样式
  const baseStyle = {
    background:
      bgType === "img" ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,
  };

  // 计算高度，占据屏幕空闲高度
  return {
    ...baseStyle,
    height: "calc(66vh - 120rpx)", // 减去顶部导航栏等固定高度
    minHeight: "calc(66vh - 120rpx)",
  };
});
</script>

<style lang="scss" scoped>
.order-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ss-order-menu-wrap {
  margin-top: 120rpx;
  margin-bottom: 120rpx;
  .menu-item {
    height: 160rpx;
    position: relative;
    z-index: 10;
    .menu-title {
      font-size: 24rpx;
      line-height: 24rpx;
      color: #ffffff;
    }
    .item-icon {
      width: 80rpx;
      height: 80rpx;
    }
    .num-icon {
      position: absolute;
      right: 18rpx;
      top: 18rpx;
      // width: 40rpx;
      padding: 0 8rpx;
      height: 26rpx;
      background: #ff4d4f;
      border-radius: 13rpx;
      color: #fefefe;
      display: flex;
      align-items: center;
      .num {
        font-size: 24rpx;
        transform: scale(0.8);
      }
    }
  }
}

.my-order-section {
  background-color: rgba(255, 255, 255, 0.5);

  .order-title {
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.3);
    margin-bottom: 20rpx;
    padding-left: 20rpx;
  }

  .order-menu-wrap {
    .menu-item {
      height: 160rpx;
      position: relative;
      z-index: 10;

      .menu-title {
        font-size: 24rpx;
        line-height: 24rpx;
        color: #333333;
      }

      .item-icon {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }

  .black-rectangle {
    background-color: #000000;
    width: 100%;
    color: #ffffff;
    text-align: right;
    padding: 16rpx 0;

    span {
      margin-right: 12rpx;
    }
  }
}
</style>
